<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	pageContext.setAttribute("basePath", basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Smart Link</title>

<!-- Bootstrap Core CSS -->
<link href="${basePath}css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="${basePath}css/sb-admin.css" rel="stylesheet">

<!-- Morris Charts CSS -->
<link href="${basePath}css/plugins/morris.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="${basePath}font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">

<!-- jQuery -->
<script src="${basePath }js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="${basePath }js/bootstrap.min.js"></script>

<script src="${basePath }js/jquery.validate.js"></script>
<script src="${basePath }js/additional-methods.js"></script>
<script type="text/javascript">
	$().ready(function() {
		// validate signup form on keyup and submit
		$("#settingForm").validate({
			rules : {
				alarmBeginDate : {
					time : true
				},
				alarmOverDate : {
					time : true
				},
				alarmPhone : {
					maxlength : 11,
					minlength : 11,
					integer : true
				},
				alarmEmail : {
					email : true

				}
			},
			messages : {
				alarmBeginDate : {
					time : "请输入正确时间，00:00 and 23:59"
				},
				alarmOverDate : {
					time : "请输入正确时间，00:00 and 23:59"
				},
				alarmPhone : {
					minlength : "请输入正确手机号码",
					maxlength : "请输入正确手机号码",
					integer : "请输入正确手机号码"
				},
				alarmEmail : {
					email : "请输入正确邮箱地址"

				}
			}
		});
	});
</script>
<style type="text/css">
.error {
	color: red;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.${basePath }js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

	<div id="wrapper">

		<!-- Navigation -->
		<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target=".navbar-ex1-collapse">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="index.html">Smart Link</a>
		</div>
		<!-- Top Menu Items -->
		<ul class="nav navbar-right top-nav">
			<li class="dropdown"><a href="#" class="dropdown-toggle"
				data-toggle="dropdown"><i class="fa fa-envelope"></i> <b
					class="caret"></b></a>
				<ul class="dropdown-menu message-dropdown">
					<li class="message-preview"><a href="#">
							<div class="media">

								<div class="media-body">
									<h5 class="media-heading">
										<strong>John Smith</strong>
									</h5>
									<p class="small text-muted">
										<i class="fa fa-clock-o"></i> Yesterday at 4:32 PM
									</p>
									<p>Lorem ipsum dolor sit amet, consectetur...</p>
								</div>
							</div>
					</a></li>
					<li class="message-preview"><a href="#">
							<div class="media">

								<div class="media-body">
									<h5 class="media-heading">
										<strong>John Smith</strong>
									</h5>
									<p class="small text-muted">
										<i class="fa fa-clock-o"></i> Yesterday at 4:32 PM
									</p>
									<p>Lorem ipsum dolor sit amet, consectetur...</p>
								</div>
							</div>
					</a></li>
					<li class="message-preview"><a href="#">
							<div class="media">

								<div class="media-body">
									<h5 class="media-heading">
										<strong>John Smith</strong>
									</h5>
									<p class="small text-muted">
										<i class="fa fa-clock-o"></i> Yesterday at 4:32 PM
									</p>
									<p>Lorem ipsum dolor sit amet, consectetur...</p>
								</div>
							</div>
					</a></li>
					<li class="message-footer"><a href="#">Read All New
							Messages</a></li>
				</ul></li>
			<li class="dropdown"><a href="#" class="dropdown-toggle"
				data-toggle="dropdown"><i class="fa fa-bell"></i> <b
					class="caret"></b></a>
				<ul class="dropdown-menu alert-dropdown">
					<li><a href="#">Alert Name <span
							class="label label-default">Alert Badge</span></a></li>
					<li><a href="#">Alert Name <span
							class="label label-primary">Alert Badge</span></a></li>
					<li><a href="#">Alert Name <span
							class="label label-success">Alert Badge</span></a></li>
					<li><a href="#">Alert Name <span class="label label-info">Alert
								Badge</span></a></li>
					<li><a href="#">Alert Name <span
							class="label label-warning">Alert Badge</span></a></li>
					<li><a href="#">Alert Name <span
							class="label label-danger">Alert Badge</span></a></li>
					<li class="divider"></li>
					<li><a href="#">View All</a></li>
				</ul></li>
			<li class="dropdown"><a href="#" class="dropdown-toggle"
				data-toggle="dropdown"><i class="fa fa-user"></i> John Smith <b
					class="caret"></b></a>
				<ul class="dropdown-menu">
					<li><a href="#"><i class="fa fa-fw fa-user"></i> Profile</a></li>
					<li><a href="#"><i class="fa fa-fw fa-envelope"></i> Inbox</a>
					</li>
					<li><a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
					</li>
					<li class="divider"></li>
					<li><a href="#"><i class="fa fa-fw fa-power-off"></i> Log
							Out</a></li>
				</ul></li>
		</ul>
		<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
		<div class="collapse navbar-collapse navbar-ex1-collapse">
			<ul class="nav navbar-nav side-nav">
				<li class="active"><a href="showClassroomList"><i
						class="fa fa-fw fa-dashboard"></i> 返回上页</a></li>
				<li><a
					href="showAddSensorsForm?clsroomId=${classroom.id }&deviceId=${classroom.deviceId}"><i
						class="fa fa-fw fa-table"></i> 添加传感器</a></li>
				<!--  <li><a href="showCTList?clsroomId=${classroom.id }"><i
						class="fa fa-fw fa-wrench"></i> 管理员列表</a></li>-->
				<li><a href="removeClassroom?clsroomId=${classroom.id}"><i
						class="fa fa-fw fa-file"></i> 删除该教室</a></li>
			</ul>
		</div>
		<!-- /.navbar-collapse --> </nav>

		<div id="page-wrapper">

			<div class="container-fluid">

				<!-- Page Heading -->
				<div class="row">
					<div class="col-lg-12">
						<h1 class="page-header">
							${classroom.building.name } <small>${classroom.nameNumber }</small>
						</h1>
					</div>
				</div>
				<!-- /.row -->
				<!-- /.row -->

				<div class="row">
					<!--<div class="col-lg-3 col-md-6">
							<div class="panel panel-green">
						  <div class="panel-heading">
								<div class="row">
									<div class="col-xs-3">
										<i class="fa fa-tasks fa-5x"></i>
									</div>
									<div class="col-xs-9 text-right">
										<div class="huge">12</div>
										<div>New Tasks!</div>
									</div>
								</div>
							</div>
							<a href="#">
								<div class="panel-footer">
									<span class="pull-left">View Details</span> <span
										class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
									<div class="clearfix"></div>
								</div>
							</a>
						</div>
					</div>-->
					<!-- <div class="col-lg-3 col-md-6">
						<div class="panel panel-red">
							<div class="panel-heading">
								<div class="row">
									<div class="col-xs-3">
										<i class="fa fa-support fa-5x"></i>
									</div>
									<div class="col-xs-9 text-right">
										<div class="huge">13</div>
										<div>Support Tickets!</div>
									</div>
								</div>
							</div>
							<a href="#">
								<div class="panel-footer">
									<span class="pull-left">View Details</span> <span
										class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
									<div class="clearfix"></div>
								</div>
							</a>
						</div>
					</div>-->
				</div>
				<!-- /.row -->

				<div class="row">
					<div class="col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">
									<i class="fa fa-bar-chart-o fa-fw"></i> 实时数据
								</h3>
							</div>
							<div class="panel-body">
								<div class="j_10086_iotapp"
									data-view="566bd830325b9640724f77699c7d891e"
									style="height: 300px; width: 950px;"></div>
								<script
									src="http://open.iot.10086.cn/static/files/develop/appembed.js?v=1.0"></script>
							</div>
						</div>
					</div>
				</div>
				<!-- /.row -->

				<div class="row">
					<div class="col-lg-12">
						<h2>设置</h2>

						<div class="table-responsive">


							<form id="settingForm" action="updateSetting" method="post">

								<input name="clsroomId" type="hidden" value="${classroom.id }" />
								<input name="settingId" type="hidden"
									value="${classroom.setting.id }" />


								<table class="table table-bordered table-hover table-striped">
									<thead>
										<tr>
											<th>开启报警</th>
											<th>开启响铃报警</th>
											<th>开始时间</th>
											<th>结束时间</th>
											<th>报警电话</th>
											<th>报警Email</th>
										</tr>
									</thead>
									<tbody>
										<tr class="warning">
											<td><s:if test="#request.classroom.setting.isAlarm==0">
													<input type="radio" name="isAlarm" value="1" />NO <br />
													<input type="radio" name="isAlarm" value="0"
														checked="checked" />OFF
										</s:if> <s:else>
													<input type="radio" name="isAlarm" value="1"
														checked="checked" />NO <br />
													<input type="radio" name="isAlarm" value="0" />OFF
										</s:else></td>
											<td><s:if
													test="#request.classroom.setting.isAiRegulate==0">
													<input type="radio" name="isAiRegulate" value="1" />NO <br />
													<input type="radio" name="isAiRegulate" value="0"
														checked="checked" />OFF
										</s:if> <s:else>
													<input type="radio" name="isAiRegulate" value="1"
														checked="checked" />NO <br />
													<input type="radio" name="isAiRegulate" value="0" />OFF
										
										</s:else></td>

											<td><input name="alarmBeginDate" type="text"
												class="form-control"
												placeholder="<s:date name="#request.classroom.setting.alarmBeginDate" format="HH:mm"/>" /></td>
											<td><input name="alarmOverDate" type="text"
												class="form-control"
												placeholder="<s:date name="#request.classroom.setting.alarmOverDate" format="HH:mm"/>" /></td>

											<td><input name="alarmPhone" type="text"
												class="form-control"
												placeholder="${classroom.setting.alarmPhone }" /></td>
											<td><input name="alarmEmail" type="text"
												class="form-control"
												placeholder="${classroom.setting.alarmEmail}" /></td>

										</tr>

									</tbody>
								</table>

								<table class="table table-bordered table-hover table-striped">
									<thead>
										<tr>
											<th>室内适宜温度(℃)</th>
											<th>室内适宜湿度(%)</th>
											<th>植物适宜湿度(%)</th>
										</tr>
									</thead>
									<tbody>
										<tr class="warning">
											<td><input name="roomTemperature" type="text"
												class="form-control"
												placeholder="${classroom.setting.roomTemperature}" /></td>
											<td><input name="roomRh" type="text"
												class="form-control"
												placeholder="${classroom.setting.roomRh}" /></td>
											<td><input name="soilRh" type="text"
												class="form-control"
												placeholder="${classroom.setting.soilRh}" /></td>
										</tr>
										<tr>
											<td colspan="5"><input type="submit"
												class="btn btn-xs btn-primary" value="保存" /></td>
										</tr>
									</tbody>


								</table>


							</form>
						</div>
					</div>

					<div class="col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">
									<i class="fa fa-money fa-fw"></i> 传感器列表
								</h3>
							</div>
							<div class="panel-body">
								<div class="table-responsive">
									<table class="table table-bordered table-hover table-striped">
										<thead>
											<tr>
												<th>序 号</th>
												<th>名 称</th>
												<th>类 型</th>
												<th>测试</th>
											</tr>
										</thead>
										<tbody>
											<s:iterator value="#request.classroom.sensorses" var="sensor">
												<tr>
													<td>${sensor.id }</td>
													<td>${sensor.sensorsName }</td>
													<td><s:if test="#sensor.type==0">
													    安全信息
													</s:if> <s:elseif test="#sensor.type==1">
													环境信息
													</s:elseif> <s:else>开关类型</s:else></td>
													<td><s:if test="#sensor.type==2">
															<a
																href="http://${sensor.classroom.piIp }${sensor.api}?light=1&fan=1&curtain=1">NO</a>&nbsp;&nbsp;
														<a
																href="http://${sensor.classroom.piIp }${sensor.api}?light=0&fan=0&curtain=0">OFF</a>
														</s:if> <s:else>
															<a href="#">测试</a>
														</s:else></td>
												</tr>
											</s:iterator>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- /.row -->

			</div>
			<!-- /.container-fluid -->

		</div>
		<!-- /#page-wrapper -->

	</div>

</body>
</html>